<template>
  <div class='container'>
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item >酒店</el-breadcrumb-item>
          <el-breadcrumb-item >酒店预定</el-breadcrumb-item>
        </el-breadcrumb>
        </div>
      <section  class='container'>
          <hotelsearchForm 
          @searchData='handleSearch'
          :locationList='locationList'
          :isload='isload'/>
         <hotelFilter @filter='handleFilter'/>
          <hotelInfo 
          :hotelItem='item'
          v-for ='(item,index) in hotelList'
          :key='index'
          :id='item.id'
          v-loading="isload"
          />
          <h4 class='disappointed' 
          v-if='hotelList.length==0'
          v-loading="isload"
          >暂无符合条件的酒店</h4>
          <div class="pagechange">
       <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="pageIndex"
          :page-size="pageSize"
          @current-change="currentChange"
        >
        </el-pagination>
     </div>
   </section>
</div>
</template>
<script>

import HotelsearchForm from "@/components/hotel/hotelsearchForm.vue"
import HotelInfo from "@/components/hotel/hotelInfo.vue"
import HotelFilter from "@/components/hotel/hotelFilter"
export default {
  components:{HotelsearchForm,HotelFilter,HotelInfo},
  data(){
    
      return{
        //   name:'',
          hotelList:[],
          pageSize:6,
          pageIndex:1,
          total:0,
          locationList:[],
           isload:true,
           searchForm:{
                city:''
            },
            filterForm:{
                price_lt:4000,
                hotellevel_in:[],
                hoteltype_in:[],
                hotelasset_in: [],
                hotelbrand_in: [],
            },
          
      }
  },
  
  methods:{
      handleSearch(value){
          this.searchForm=value
          this.request()
      },
      handleFilter(value){
          this.filterForm=value
          this.request()
      },
      request(){

          if(!this.searchForm || !this.filterForm){
              return res;
          }
          this.isload=true
          const data={...this.searchForm,...this.filterForm}
          const start= (this.pageIndex-1) * this.pageSize
      

          var keys = Object.keys(data); 
          var str = "";
          keys.forEach(v => {
          if(Array.isArray(data[v])){
              // data[v] => [1,2]
              data[v].forEach(item => {
                  str += `${v}=${item}&`;
              })
          }else{
              str += `${v}=${data[v]}&`;
          }
      })
      console.log(str)
          this.$axios({ 
          url: `/hotels?_start=${start}&_limit=${this.pageSize}&${str}`,
          }).then(res=>{ 
              console.log(1,res.data.data);
              this.hotelList=res.data.data
              this.total=res.data.total
              this.locationList=[]
             this.hotelList.forEach(value=>{ 
                 this.locationList.push({...value.location,name:value.name})
              })
              console.log(this.locationList);
              this.isload=false
          })       
      },
      currentChange(newPageIndex) {
                this.pageIndex = newPageIndex;
                this.request()
            },
  }
}
</script>

<style lang="less" scoped>
.container {
      width: 1000px;
      margin: 0 auto;
.el-breadcrumb {
      font-size: 14px;
      line-height: 5;
    }
 .disappointed{
          text-align: center;
          padding-top: 20px;
          margin-top: 10px;
      }
.pagechange{
    padding-top: 20px;
    display: flex;
    justify-content: right;
    
    }
  }
</style>